<template>

  <el-form :inline="true" :model="queryParams" label-position="right" size="small" class="filter-form-inline">
    <el-row :gutter="40" style="margin-left: 0px;margin-right: 0px">
      <el-col :lg="8" :xs="8">
        <el-form-item label="关键字" style="width: 100%">
          <el-input v-model="queryParams.selectStr" clearable @change="handleChange" placeholder="输入名称" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <table-view :data="tableData" header-cell-class-name="table-header" size="medium" border @row-click="aloneClick"
    :cell-style="cellStyle">
    <el-table-column prop="terminalNo" label="终端编号" header-align="center" :show-overflow-tooltip="true" />

    <el-table-column prop="terminalName" label="终端户名称" header-align="center" :show-overflow-tooltip="true" />

    <el-table-column prop="tel" label="终端所在地" align="center" :show-overflow-tooltip="true">
      <template #default="{row}">
        <span v-if=" row.provinceName">{{row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="address" label="详细地址" align="center" :show-overflow-tooltip="true" />

    <el-table-column prop="createdAt" label="创建时间" align="center" :show-overflow-tooltip="true">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column prop="creatorName" label="创建人" align="center" :show-overflow-tooltip="true" />

    <el-table-column label="操作" width="100" align="center">
      <template #default="{row}">
        <el-button type="text" @click="handleConfirm(row.id)">确认</el-button>
      </template>
    </el-table-column>

  </table-view>

  <Pagination v-model:page="queryParams.page" v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end" :total="total" @pagination="handlList" />

  <rule-form ref="ruleFormDialog" :sub="sub" :type-str="typeStr" form-type="2" @succsess="succsess" />

</template>

<script>
import {
  getCurrentInstance,
  defineAsyncComponent,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter } from "vue-router";

export default {
  name: "terminal",
  components: {
    ruleForm: defineAsyncComponent(() =>
      import("@CRM/views/marketing/customer/terminal/modules/ruleForm.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    var data = reactive({
      queryParams: {
        selectStr: "",
        pageSize: 20,
        page: 1,
      },
      tableData: [],
      total: 0,
      ruleFormDialog: null,
      sub: {
        boole: false,
        title: "保存",
      },
      typeStr: "",
    });

    // 获取列表
    const handlList = () => {
      api.editorial
        .EDITORIAL_CUSTOMER_TERMINAL_LIST(data.queryParams)
        .then((res) => {
          if (res.code === 0) {
            data.tableData = res.data.list || [];
            data.total = res.data.total;
          }
        });
    };

    const handleConfirm = (id) => {
      data.typeStr = "update";
      data.ruleFormDialog.open(id, 3);
    };

    const succsess = () => {
      handlList();
    };

     const handleChange =()=>{
      data.queryParams.page = 1
      handlList()
    }

    //* **************************************
    onMounted((_) => {
      handlList();
    });
    //* **************************************
    return {
      ...toRefs(data),
      handlList,
      handleConfirm,
      succsess,
      handleChange
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
